/*
 * Note: this calendar view uses two grid panes, one for displaying the
 * names of the weekdays (e.g. "M", "T", "W", etc....) and one for showing
 * the date cells. To keep their alignment in sync we are using variables
 * on the top-level class "calendar-view", e.g. "-fx-vertical-grid-gap".
 * One also has to make sure that the left and right padding values of both
 * grid panes are the same.
 */
.calendar-view {
    -fx-background: -color-bg-default;
    -fx-background-color: -color-border-default, -color-bg-default;
    -fx-background-insets: 0px, 1px;
    -fx-padding: 1px;

    /* global variables for the two grid panes */
    -fx-vertical-grid-gap: 1px;
    -fx-horizontal-grid-gap: 1px;
}

.calendar-view > .container {
    -fx-alignment: center;
    -fx-fill-width: true;
}

.calendar-view > .stack-pane > .container > .footer {
    -fx-background: -color-bg-default;
    -fx-background-color: -color-bg-default;
    -fx-padding: 0px 10px 10px 10px;
}

.calendar-view > .stack-pane > .container > .header {
    -fx-background: -color-bg-default;
    -fx-background-color: -color-bg-default;
    -fx-padding: 5px;
    -fx-alignment: center;
    -fx-spacing: 5px;
}

.calendar-view > .stack-pane > .container > .header > .date-label {
    -fx-font-weight: bold;
    -fx-content-display: right;
    -fx-font-size: 1.1em;
}

.calendar-view > .stack-pane > .container > .header > .date-label.dropdown:hover {
    -fx-background-color: -color-bg-subtle;
    -fx-background-insets: 0px -2px;
    -fx-background-radius: 2px;
}

.calendar-view > .stack-pane > .container > .header > .arrow-button {
    -fx-padding: 2px;
}

.calendar-view > .stack-pane > .container > .header > .arrow-button:hover {
    -fx-background-color: -color-bg-subtle;
    -fx-background-insets: 0px -2px;
    -fx-background-radius: 2px;
}

.calendar-view > .stack-pane > .container > .header > .date-label > .dropdown-button > .arrow {
    -fx-background-color: red;
    -fx-background-insets: 0;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
    -fx-shape: "M 0 0 h 9 l -4.5 5 z";
    -fx-scale-shape: false;
}

.calendar-view > .stack-pane > .container > .header > .date-label > .dropdown-button:disabled {
    -fx-opacity: 0.4;
}

.calendar-view > .stack-pane > .container > .header > .year-spinner {
    -fx-alignment: center;
    -fx-spacing: 2px;
}

.calendar-view > .stack-pane > .container > .header > .year-spinner > .decrement-year-button,
.calendar-view > .stack-pane > .container > .header > .year-spinner > .increment-year-button {
    -fx-padding: 0px; /* 5 8 3 8 */
    -fx-cursor: hand;
}

.calendar-view > .stack-pane > .container > .header > .year-spinner > .decrement-year-button:hover,
.calendar-view > .stack-pane > .container > .header > .year-spinner > .increment-year-button:hover {
    -fx-background-color: red;
    -fx-background-insets: -2px;
    -fx-background-radius: 2px;
}

.calendar-view > .stack-pane > .container > .header > .year-spinner > .decrement-year-button:disabled,
.calendar-view > .stack-pane > .container > .header > .year-spinner > .increment-year-button:disabled {
    -fx-opacity: 0.4;
}

.calendar-view > .stack-pane > .container > .header > .year-spinner > .increment-year-button > .arrow {
    -fx-background-color: red, blue;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
    -fx-shape: "M 0 4 h 7 l -3.5 -4 z";
}

.calendar-view > .stack-pane > .container > .header > .year-spinner > .decrement-year-button > .arrow {
    -fx-background-color: red, blue;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

.calendar-view > .stack-pane > .container > .header > .previous-month-button:hover,
.calendar-view > .stack-pane > .container > .header > .next-month-button:hover {
    -fx-background: green;
}

.calendar-view > .stack-pane > .container > .header > .previous-month-button:pressed,
.calendar-view > .stack-pane > .container > .header > .next-month-button:pressed {
}

.calendar-view > .stack-pane > .container > .header > .previous-month-button:disabled,
.calendar-view > .stack-pane > .container > .header > .next-month-button:disabled {
    -fx-opacity: 0.4;
}

.calendar-view > .stack-pane > .container > .header > .previous-month-button,
.calendar-view > .stack-pane > .container > .header > .next-month-button {
    -fx-padding: 0.333333em 0.166667em;
}

.calendar-view > .stack-pane > .container > .header > .previous-month-button > .arrow {
    -fx-background-color: -color-fg-default;
    -fx-background-insets: 0;
    -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
    -fx-shape: "M5.997,5.072L5.995,6.501l-2.998-4l2.998-4l0.002,1.43l-1.976,2.57L5.997,5.072z";
    -fx-scale-shape: true;
}

.calendar-view > .stack-pane > .container > .header > .next-month-button > .arrow {
    -fx-background-color: -color-fg-default;
    -fx-background-insets: 0;
    -fx-padding: 0.333333em 0.25em 0.333333em 0.166667em; /* 4 3 4 2 */
    -fx-shape: "M2.998-0.07L3-1.499l2.998,4L3,6.501l-0.002-1.43l1.976-2.57L2.998-0.07z";
    -fx-scale-shape: true;
}

.calendar-view.show-grid-lines > .stack-pane > .container > .weekday-grid-pane,
.calendar-view.show-grid-lines > .stack-pane > .container > .body-grid-pane {
    -fx-grid-lines-visible: true;
}

.calendar-view > .stack-pane > .container > .weekday-grid-pane {
    -fx-background: -color-bg-default;
    -fx-background-color: -color-bg-default;
    -fx-effect: dropshadow(gaussian, -color-bg-default, 10, 0.12, -1, 2);
    -fx-grid-lines-visible: false;
    -fx-hgap: -fx-horizontal-grid-gap;
    -fx-padding: 0px 10px 10px 10px;
}

.calendar-view > .stack-pane > .container > .weekday-grid-pane > .corner {
    -fx-background: -color-bg-default;
    -fx-background-color: -color-bg-default;
}

.calendar-view > .stack-pane > .container > .weekday-grid-pane > .weekday-name {
    -size: 2em;
    -fx-pref-width: -size;
    -fx-pref-height: -size;
    -fx-min-width: -size;
    -fx-min-height: -size;
    -fx-text-fill: grey;
    -fx-font-size: .8em;
    -fx-background: -color-bg-default;
    -fx-background-color: -color-bg-default;
    -fx-alignment: center;
}

.calendar-view > .stack-pane > .container > .body-grid-pane {
    -fx-padding: 10px;
    -fx-grid-lines-visible: false;
    -fx-background: -color-bg-default;
    -fx-background-color: -color-bg-default;
    -fx-hgap: -fx-horizontal-grid-gap;
    -fx-vgap: -fx-vertical-grid-gap;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .week-number-label {
    -fx-font-size: 10px;
    -fx-text-fill: red;
    -fx-alignment: top-right;
    -fx-padding: 0px 2px 0px 0px;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell {
    -fx-background: -color-bg-default;
    -fx-background-color: -color-bg-default;
    -fx-text-fill: -color-fg-default;
    -fx-min-width: 2.5em;
    -fx-pref-width: 2.5em;
    -fx-max-width: 2.5em;
    -fx-min-height: 2.5em;
    -fx-pref-height: 2.5em;
    -fx-max-height: 2.5em;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.previous-month {
    -fx-background: rgb(230, 231, 233);
    -fx-text-fill: grey;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.next-month {
    -fx-background: rgb(230, 231, 233);
    -fx-text-fill: grey;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.weekend-day {
    -fx-background-color: red;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.today {
    -fx-border-color: red;
    -fx-border-radius: 2.5em;
    -fx-border-insets: 2px;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.selected {
  -fx-background-color: -color-accent-subtle;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.selected.next-month,
.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.selected.previous-month {
    -fx-text-fill: green;
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.selected.range-start {
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.selected.range-end {
}

.calendar-view > .stack-pane > .container > .body-grid-pane > .date-cell.selected.range-date {
    -fx-background: derive(red, +80%);
}
